<template>
  <div class="rps-game">
    <div class="bet-amount">
      <el-input-number v-model="betAmount" :min="100" :step="100" :max="100000" :disabled="!canPlay" />
    </div>
    <div class="options">
      <el-button v-for="option in options" :key="option" @click="play(option)" :disabled="!canPlay">
        {{ option }}
      </el-button>
    </div>
    <div class="game-result" v-if="result">
      <div class="player-choice">
        <div :class="['choice-image', type[result.playerChoice]]" />
        <p>你的选择</p>
      </div>
      <div class="vs">VS</div>
      <div class="computer-choice">
        <div :class="['choice-image', type[result.computerChoice]]" />
        <p>天道的选择</p>
      </div>
    </div>
    <div v-if="result" class="result">
      <p>{{ result.message }}</p>
    </div>
    <div class="message">
      <p v-if="canPlay">请选择</p>
      <p v-else-if="!hasEnoughMoney">灵石不足</p>
      <el-countdown v-else title="冷却中" :value="nextGameTime" @finish="updateCanPlay" />
    </div>
  </div>
</template>

<script setup>
import { useMainStore } from '@/plugins/store'
import { ref, computed, watch, onMounted, defineEmits } from 'vue'

const store = useMainStore()
const type = {
  布: 'cloth',
  剪刀: 'scissors',
  石头: 'fist',
}
const result = ref(null)
const options = ref(['石头', '剪刀', '布'])
const betAmount = ref(100)
const canPlay = ref(false)
const player = ref(store.player)
const emit = defineEmits(['game-result', 'update-next-game-time'])

const nextGameTime = computed(() => {
  return player.value.nextGameTimes?.rps || 0
})

const hasEnoughMoney = computed(() => {
  return player.value.props.money >= betAmount.value
})

const updateCanPlay = () => {
  canPlay.value = Date.now() >= nextGameTime.value && hasEnoughMoney.value
}

const play = (playerChoice) => {
  if (!canPlay.value) return
  const computerChoice = options.value[Math.floor(Math.random() * 3)]
  const won =
    (playerChoice === '石头' && computerChoice === '剪刀') ||
    (playerChoice === '剪刀' && computerChoice === '布') ||
    (playerChoice === '布' && computerChoice === '石头')
  const draw = playerChoice === computerChoice
  const reward = won ? betAmount.value * 2 : draw ? 0 : betAmount.value
  result.value = {
    message: won ? `恭喜您赢得了${reward}灵石！` : draw ? '很遗憾，五五开!' : '很遗憾，您输了。',
    playerChoice,
    computerChoice,
  }
  if (won) {
    player.value.props.money += reward - betAmount.value
  } else {
    player.value.props.money -= reward
  }
  emit('game-result', { success: won, reward })
  const newNextGameTime = Date.now() + 10 * 60 * 1000
  player.value.nextGameTimes.rps = newNextGameTime
  emit('update-next-game-time', {
    game: 'rps',
    time: newNextGameTime,
  })
  canPlay.value = false
}

watch(betAmount, () => updateCanPlay())

onMounted(() => {
  updateCanPlay()
})
</script>

<style scoped>
.rps-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.bet-amount {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.options {
  display: flex;
  gap: 10px;
}

.game-result {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.player-choice,
.computer-choice {
  text-align: center;
}

.vs {
  font-size: 24px;
  font-weight: bold;
}

.choice-image {
  width: 100px;
  height: 100px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.result {
  text-align: center;
}

.fist {
  background-image: url(@/assets/fist.svg);
}

.cloth {
  background-image: url(@/assets/cloth.svg);
}

.scissors {
  background-image: url(@/assets/scissors.svg);
}

.message {
  margin-bottom: 20px;
}
</style>
